<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">账户盈余管理</div>
      </div>
    </div>
    <div class="echart">
      <div id="Profit" style="width:100%;height:100px;" />
    </div>
  </div>
</template>

<script>
import 'echarts-liquidfill/src/liquidFill.js'
export default {
  name: 'Profit',
  data() {
    return {

    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie()
    })
  },
  methods: {
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('Profit'))
      const option = {
        center: ['45%', '60%'],
        title: {
          top: '30%',
          left: 'center',
          text: '结余',
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 10
          },
          subtext: (20000).toFixed(2) + '元',
          subtextStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        series: [{
          name: '账户盈余管理',
          type: 'liquidFill',
          radius: '90%',
          center: ['50%', '50%'],
          data: [0.34],
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#89DF4E'
          }, {
            offset: 1,
            color: '#34D391'
          }]),
          opacity: 1,
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#89DF4E'
            }, {
              offset: 1,
              color: '#34D391'
            }]),
            opacity: 0.6
          },
          label: {
            normal: {
              show: false,
              color: '#fff',
              insideColor: 'transparent',
              textStyle: {
                fontSize: 16,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
              }
            }
          },
          outline: {
            show: true,
            borderDistance: 1,
            itemStyle: {
              borderColor: 'rgba(67,209,100,1)',
              borderWidth: 1
            }
          },
          backgroundStyle: {
            color: '#25262F'
          }
        }]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        font-size: 12px;
        font-weight: 400;
        color: #F7B500;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    margin: -5px 0 16px 0;
  }
}
</style>
